<template>
  <div class="newsList">
    <div class="items"  v-infinite-scroll="loadMore"
         infinite-scroll-disabled="loading"
         infinite-scroll-immediate-check="false"
         infinite-scroll-distance="10">
      <div class="item" :key="index" v-for="(item,index) in newsList.data" @click="goDetail(item.id)">
        <h4>{{item.title}}</h4>
        <p>{{item.excerpt}}</p>
        <div class="time">
          <i class="iconfont icon-shijian"></i>{{item.created_at.slice(0,10)}}
        </div>
      </div>
    </div>
    <loading v-if="isLoading"></loading>
  </div>
</template>

<script>
  import loading from './../common/Loading'
  export default {
    name: "NewsList",
    data() {
      return {
        newsList: {
          data: [],
          last_page: '1',
          current_page: '1'
        },
        isLoading:false
      }
    },
    components:{
      loading
    },
    mounted() {
      this.$api.getArticles().then((res) => {
        console.log(res);
        this.newsList = res.data;
      })
    },
    methods:{
      goDetail(id){
        this.$router.push({path:'newsdetail',query:{id:id}})
      },

      loadMore(){
        if (this.newsList.current_page<this.newsList.last_page) {
          this.isLoading = true;
          this.$api.getArticles({page:this.newsList.current_page+1}).then((res)=>{
            this.newsList.current_page = res.data.current_page;
            this.newsList.data=this.newsList.data.concat(res.data.data);
            this.isLoading = false;
          }).catch(()=>{
            this.isLoading = false;
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .newsList {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-top: 1px solid #F2F2F2;
    .items {
      width: 100%;
      padding: 0 4vw;
      background-color: #fff;
      .item{
        border-bottom: 1px solid #F2F2F2;
        h4 {
          font-size:30px;
          font-family:SourceHanSansCN-Medium;
          font-weight:500;
          color:rgba(51,51,51,1);
          line-height:30px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          margin: 60px 0 0 0;
        }
        > p {
          font-size:24px;
          font-family:SourceHanSansCN-Regular;
          font-weight:400;
          color:rgba(128,128,128,1);
          line-height:36px;
          display: -webkit-box;
          /*! autoprefixer: off */
          -webkit-box-orient: vertical;
          /* autoprefixer: on */
          -webkit-line-clamp: 3;
          text-overflow: ellipsis;
          overflow: hidden;
          margin: 24px 0 28px 0;
        }
        .imgBg {
          width: 100%;
        }

        .time {
          height: 14px;
          margin: 0px 0 60px 0;
          font-size: 18px;
          font-weight: bold;
          color: rgba(0, 0, 0, 1);
          line-height: 14px;
          opacity: 0.7;
          font-family: Arial-BoldMT;
          > i {
            width: 14px;
            height: 14px;
            font-size: 14px;
            margin: 0 10px 0 0;
          }
      }
      }
    }
  }
</style>
